<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column fixed prop="UserId" label="序号" />
    <el-table-column prop="UserName" label="用户名" />
    <el-table-column prop="NickName" label="昵称" />
    <el-table-column prop="UserEmail" label="邮箱" />
    <el-table-column prop="Password" label="密码" >
        <template #default="scope">
            <span>********</span>
        </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleDelete(scope.row)">
          删除
        </el-button>
        <el-button link type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <table>
    <tr>
        <td>
            <el-pagination
      v-model:current-page="Page.PageIndex"
      v-model:page-size="Page.PageSize"
      :page-sizes="[3, 6, 9]"
      :size="Page.PageSize"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="Page.PageSum"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
        </td>
    </tr>
  </table>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { get } from '@/api';
import axios from 'axios';
import { ta } from 'element-plus/es/locales.mjs';

const router = useRouter();

const Page=ref({
    PageIndex:1,
    PageSize:3,
    PageSum:0
})

const handleDelete = (row: any) => {
  console.log('delete', row)
}

const handleEdit = (row: any) => {
  router.push(`/editUser/${row.UserId}`);
}

const GetAll=()=>{
    axios({
      url:"http://localhost:5028/api/Management/GetUser",
      method:"get",
      params:Page.value
    })
    .then(res=>{
      console.log(res)
      tableData.value=res.data.Result.Value
    })
}

onMounted(()=>{
    GetAll();
})

const tableData = ref([]);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  Page.value.PageSize=val;
  GetAll;
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
    Page.value.PageIndex=val;
    GetAll;
}
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
